import React, { useState, useEffect,useRef } from 'react';
import { Col, Row, Button, Input, Select, Pagination, Modal } from 'antd'
import style from './../ServiceTeamCss/StandardTasks.module.css'
import { Table } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { changePage, changepagesize, addstandarddata, editstandarddata, Enable, Disable, deletef, query } from "./../../store/action"
import AddModal from "./../../component/StandardTasksmodal/addmodal"
import EditModal from '../../component/StandardTasksmodal/editmodal';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { Option } = Select
const { confirm } = Modal;

const StandardTasks = (props) => {
    const standardcolumns = useSelector(state => state.standardcolumns);
    const standarddata = useSelector(state => state.standarddata);
    
    const page = useSelector(state => state.page);
    const pagesize = useSelector(state => state.pagesize);
    const [temparr, settemparr] = useState(standarddata)
    
    const dispatch = useDispatch();
    const [num, setNum] = useState(0);
    const [newArr, setnewArr] = useState([]);
    const changePages = (p) => {
        dispatch(changePage(p))
    }
    const disablefn = () => {
        if (num > 0) {
            let arr = standarddata.concat([])
            for (let i = 0; i < arr.length; i++) {
                for (let k = 0; k < newArr.length; k++) {
                    if (arr[i].key === newArr[k].key) {
                        arr[i] = { ...arr[i], sstate: '禁用' }
                    }

                }

            }
            // console.log(arr);
            settemparr(arr)
            // dispatch(Disable(arr))

        } else {
            Modal.warning({
                title: '提示',
                content: '请选择禁用对象',
            });
        }


    }
    const enable = () => {
        if (num > 0) {
            //let arr = standarddata.concat([])
            let arr = JSON.parse(JSON.stringify(standarddata))
            // let arr = [...standarddata]
            // let arr = standarddata.slice(0)
            for (let i = 0; i < arr.length; i++) {
                for (let k = 0; k < newArr.length; k++) {
                    if (arr[i].key === newArr[k].key) {
                        //  arr[i]={...arr[i],sstate:'启用'}
                        // let temp = { ...arr[i], sstate: '启用' }
                        // arr[i]=temp
                        arr[i].sstate = '启用'
                    }

                }

            }
            settemparr(arr)
            // dispatch(Enable(arr))
        } else {
            Modal.warning({
                title: '提示',
                content: '请选择启用对象',
            });
        }



    }
    const changepagesizes = (pz) => {
        dispatch(changepagesize(pz))
    }
    const addstandarddatas = (obj) => {
        let arr = [...temparr,obj]
        
        settemparr(arr)
        console.log(obj);
        // dispatch(addstandarddata(obj))
    }
    const editstandarddatas = (v) => {
        settemparr(v)
        // dispatch(editstandarddata(v))
    }
    const [nowpage, setnowpage] = useState(1);
    const [arrlist, setarrlist] = useState([])

    const [editObj, seteditObj] = useState({})
    const [addstate, setAddstate] = useState(false);
    const [editstate, setEditstate] = useState(false);
    const formatDateTime = function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        var second = date.getSeconds();
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
    };
    const deletefn = () => {
        if (num>0) {
            confirm({
                title: '提示',
                cancelText: '取消',
                okText: "确定",
                icon: <ExclamationCircleOutlined />,
                content: '确定删除吗？',
                onOk() {
                    let arr = JSON.parse(JSON.stringify(standarddata))
                    // let arr = [...standarddata]
                    // let arr = standarddata.slice(0)
                    for (let i = 0; i < arr.length; i++) {
                        for (let k = 0; k < newArr.length; k++) {
                            if (arr[i].key === newArr[k].key) {
                                //  arr[i]={...arr[i],sstate:'启用'}
                                // let temp = { ...arr[i], sstate: '启用' }
                                // arr[i]=temp
                                arr.splice(i,1)
                            }

                        }
                       
                        
                    }
                    // console.log(arr);
                    settemparr(arr)
                    // dispatch(deletef(arr))
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        } else {
            Modal.warning({
                title: '提示',
                content: '请选择删除对象',
            });
       }
        
    }
    const queryfn = () => {
        
        // console.log(nameinput);
        // console.log(stateinput);
        // console.log(departmentinput);
        // console.log(jobsinput);
        let arr = JSON.parse(JSON.stringify(temparr))
        if (nameinput || stateinput || departmentinput || jobsinput) {
            // console.log(arr);
           
            if (nameinput) {
                arr = arr.filter(el => {
                    return el.sname.indexOf(nameinput) > -1 
                })
            //   console.log(arr);
            }
            if (stateinput) {
                
                
                arr = arr.filter(el => {
                   
                    return el.sstate === stateinput 
                   
                })
                // console.log(arr);
            }
            if (departmentinput) {
                arr = arr.filter(el => {
                    return  el.sdepartment === departmentinput 
                })
                // console.log(arr);
            }
            if (jobsinput) {
                arr = arr.filter(el => {
                    return  el.sjobs === jobsinput
                })
                // console.log(arr);
            }
            // console.log(arr);
            // 
            settemparr(arr)
            console.log(arrlist);
        } else {
            Modal.warning({
                title: '提示',
                content: '请选择查询条件',
            });
        }
      
    }
    const [nameinput, setnameinput] = useState('');
    const [stateinput, setstateinput] = useState('');
    const [departmentinput, setdepartmentinput] = useState('');
    const [jobsinput, setjobsinput] = useState('');
    useEffect(() => {
        console.log('useEffectarr');
        setarrlist(() => {
            return temparr.filter((el, index) => {
                let start = page * pagesize - pagesize
                let end = page * pagesize
                return start - 1 < index && index < end
            })
        })
    }, [standarddata, page, pagesize, temparr])

    return (
        <div className={style.titel}>
            丨标准任务
            <hr></hr>
            <Row className={style.serch}>
                <Col span={5}>任务名称<Input className={style.input} value={nameinput} onChange={(e) => {
                    setnameinput(e.target.value)
                }} /></Col>
                <Col span={5}>状态 <Select className={style.input} placeholder="--请选择--" value={stateinput} onChange={(value,e) => {
                    setstateinput(value)
                    // console.log(e);
                }} >
                    <Option value="启用" >启用</Option>
                    <Option value="禁用">禁用</Option>
                </Select></Col>
                <Col span={5}>责任部门 <Select className={style.input} placeholder="--请选择--" value={departmentinput} onChange={(value,e) => {
                    setdepartmentinput(value)
                }}>
                    <Option value="服务团队">服务团队</Option>
                    <Option value="产品研发中心">产品研发中心</Option>
                </Select></Col>
                <Col span={5}>责任岗位 <Select className={style.input} placeholder="--请选择--" value={jobsinput} onChange={(value,e) => {
                    setjobsinput(value)
                }} >
                    <Option value="高级录入员">高级录入员</Option>
                    <Option value="基础录入员">基础录入员</Option>
                </Select></Col>
                <Col span={4}><Button className={style.button} type="primary" onClick={queryfn}>查询</Button></Col>
            </Row>
            <Row>
                <Col span={14}></Col>
                <Col span={10}>
                    <Row className={style.a}>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} onClick={
                            () => {
                                setAddstate(true)
                            }
                        }>新增</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} onClick={
                            () => {
                                if (num === 1) {
                                    setEditstate(true)
                                } else {
                                    Modal.warning({
                                        title: '提示',
                                        content: '编辑时只能选择一项',
                                    });
                                }

                            }
                        }>编辑</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} onClick={enable}>启用</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} onClick={disablefn}

                        >禁用</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn} onClick={deletefn}>删除</Button></Col>
                        <Col className={style.b} span={4}><Button type="primary" className={style.buttonboxbtn}>导出</Button></Col>
                    </Row>






                </Col>
            </Row>
            <Table
                style={{ marginTop: "20px" }}
                rowSelection={{
                    type: "checkbox",
                    onChange: (selectedRowKeys, selectedRows, info) => {

                        console.log(selectedRows);
                        console.log(selectedRowKeys);
                        console.log(info);
                        setNum(selectedRows.length)
                        setnewArr(selectedRows)
                        // console.log(newArr);
                        seteditObj(selectedRows[selectedRows.length - 1])


                    }
                }}
                columns={standardcolumns}
                dataSource={arrlist}
                pagination={false}

            />
            <Pagination
                style={{ marginTop: "20px", textAlign: "right" }}
                showSizeChanger
                defaultPageSize={pagesize}
                pageSizeOptions={[5, 10, 15]}
                onShowSizeChange={(p, pz) => {

                    changepagesizes(pz)

                }}
                onChange={(p, pz) => {
                    changePages(p)
                }}
                defaultCurrent={nowpage}
                total={standarddata.length}
            />
            <AddModal addstate={addstate} myclick1={
                (v) => {
                    setAddstate(false)
                    // console.log(v);
                    let obj = v.user

                    let date = new Date()

                    obj.stime = formatDateTime(date)
                    addstandarddatas(obj)
                    changePages(Math.ceil(standarddata.length / pagesize))
                    // console.log(standarddata);
                    // console.log(formatDateTime(date));
                }

            } myclick={() => {
                setAddstate(false)
            }} />
            {num ? <EditModal editObj={editObj} editstate={editstate} editmyclick={
                (v) => {
                    setEditstate(false)
                    console.log(v.user);
                    let date = new Date()
                    v.user.stime = formatDateTime(date)
                    let arr = standarddata.concat([])
                    console.log(arr[0] === standarddata[0]);
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].key === v.user.key) {
                            console.log(123);
                            arr[i] = v.user
                        }

                    }
                    editstandarddatas(arr)
                    // settemparr(arr)
                    console.log(arr);
                }
            } myclick={() => {
                setEditstate(false)

            }} /> : null}

        </div>
    );
}

export default StandardTasks;
